<template>
	<div class="grid-layout-container">
		<el-card class="box-card">
			<template #header>
				<div class="homeQueryBox flex-startCenter">
					<span class="mr10 personal-edit-title">本月统计</span>
					<el-radio-group v-model="state.status" class="mr10">
						<el-radio-button :label="1">全部</el-radio-button>
						<el-radio-button :label="2">直营</el-radio-button>
						<el-radio-button :label="3">加盟</el-radio-button>
					</el-radio-group>
					<section class="width280">
						<DatePickerBox />
					</section>
				</div>
			</template>
			<section class="px10">
				<el-row :gutter="10">
					<el-col :span="9">
						<div>
							<PieChart :height="160"  :data="state.data" /> 
							<div class="personal-recommend">
								<div class="font16">月营业额 </div>
								<div class="font16">总计：1000元 </div>
							</div>
						</div>
					</el-col>
					<el-col :span="9">
						<div>
							<PieChart :height="160"  :data="state.data" /> 
							<div class="personal-recommend">
								<div class="font16">月营业额 </div>
								<div class="font16">总计：1000元 </div>
							</div>
						</div>
					</el-col>
					<el-col :span="9" >
						<div>
							<PieChart :height="160"  :data="state.data" /> 
							<div class="personal-recommend">
								<div class="font16">月营业额 </div>
								<div class="font16">总计：1000元 </div>
							</div>
						</div>
					</el-col>
					<el-col :span="9" >
						<div>
							<PieChart :height="160"  :data="state.data" /> 
							<div class="personal-recommend">
								<div class="font16">月营业额 </div>
								<div class="font16">总计：1000元 </div>
							</div>
						</div>
					</el-col>
					<el-col :span="9" >
						<div>
							<PieChart :height="160"  :data="state.data" /> 
							<div class="personal-recommend">
								<div class="font16">月营业额 </div>
								<div class="font16">总计：1000元 </div>
							</div>
						</div>
					</el-col>
					<el-col :span="9" >
						<div>
							<PieChart :height="160"  :data="state.data" /> 
							<div class="personal-recommend">
								<div class="font16">月营业额 </div>
								<div class="font16">总计：1000元 </div>
							</div>
						</div>
					</el-col>
					<el-col :span="9" >
						<div>
							<PieChart :height="160"  :data="state.data" /> 
							<div class="personal-recommend">
								<div class="font16">月营业额 </div>
								<div class="font16">总计：1000元 </div>
							</div>
						</div>
					</el-col>
					<el-col :span="9" >
						<div>
							<PieChart :height="160"  :data="state.data" /> 
							<div class="personal-recommend">
								<div class="font16">月营业额 </div>
								<div class="font16">总计：1000元 </div>
							</div>
						</div>
					</el-col>
					<el-col :span="9" >
						<div>
							<PieChart :height="160"  :data="state.data" /> 
							<div class="personal-recommend">
								<div class="font16">月营业额 </div>
								<div class="font16">总计：1000元 </div>
							</div>
						</div>
					</el-col>
				</el-row>
			</section>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="funGridLayout">
	import {reactive, onMounted, watch, onActivated, defineAsyncComponent } from 'vue';
	import { storeToRefs } from 'pinia';
	import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
	const PieChart = defineAsyncComponent(() => import('/@/views/home/components/Pie.vue'));
	const storesTagsViewRoutes = useTagsViewRoutes();
	const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
	const state = reactive({
		status: 1,
		data: {
			tooltip: {
				trigger: "item",
				formatter: "{a} <br/>{b} : {c} ({d}%)",
				position: "bottom",
			},
			series: [
				{
					name: "门店名称",
					type: "pie",
					radius: ["60%", "85%"],
					avoidLabelOverlap: true,
					label: {
					normal: {
						show: false,
						position: "center",
						formatter: "总计:{c}",
					},
					emphasis: {
						show: true,
						textStyle: {
						fontSize: "16",
						fontWeight: "bold",
						},
					},
					},
					labelLine: {
					show: false,
					},
					data:[
						{ value: 30, name: '现金支付' },
						{ value: 30, name: '微信支付' },
						{ value: 30, name: '美团核销' },
					]
				},
			],
		}
	});
	// 页面加载时
	onMounted(() => {
		
	});
	// 由于页面缓存原因，keep-alive
	onActivated(() => {
		initEchartsResizeFun();
	});
	// 监听 pinia 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
	watch(
		() => isTagsViewCurrenFull.value,
		() => {
			initEchartsResizeFun();
		}
	);
</script>
<style scoped lang="scss">
.grid-layout-container {
	.box-card :deep(.el-card__header){
		padding: 10px 10px !important;
	}
	.box-card :deep(.el-card__body){
	}
	.box-card :deep(.el-card__body){
		padding: 0px !important;
	}
	.personal-edit-title {
		position: relative;
		padding-left: 10px;
		color: var(--el-text-color-regular);
		line-height: 22px;
		&::after {
			content: '';
			width: 4px;
			height: 18px;
			line-height: 22px;
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			background: var(--el-color-primary);
			border-radius: 2px;
		}
	}
}

.personal-recommend {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
// :deep(.el-table__expand-column){
:deep(.el-col-9) {
	max-width: 11.111111111%;
    flex: 0 0 11.111111111%
}
</style>